<template>
    <div>
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
            <el-form-item label="用户名">
                <el-input v-model="searchInfo.user_name" placeholder="请输入用户名称" clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="服务器IP">
                <el-input v-model="searchInfo.client_ip" placeholder="请输入服务器IP" clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item>
                <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-form>
            <el-form-item>
                <el-button @click="deleteBatchJumpServerByLogs()" icon="el-icon-delete" :disabled="multiple"  type="danger">批量删除</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                row-key="ID"
                @selection-change="handleSelectionChange"
                border
                ref="multipleTable"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column type="selection" width="50" align="center"></el-table-column>
            <el-table-column label="ID" width="50" align="center" prop="ID">
                <template slot-scope="scope">{{scope.row.ID}}</template>
            </el-table-column>
            <el-table-column prop="user_name" label="用户名"/>
            <el-table-column prop="client_ip" label="IP地址" min-width="150"/>
            <el-table-column label="开始时间" width="200">
                <template slot-scope="scope">
                    <span v-text="scope.row.StartedAt.substring(2,19)"></span>
                </template>
            </el-table-column>
            <el-table-column label="结束时间" width="200">
                <template slot-scope="scope">
                    <span v-text="scope.row.CreatedAt.substring(2,19)"></span>
                </template>
            </el-table-column>
            <el-table-column prop="" label="会话时长">
                <template slot-scope="scope">
                    <span v-text="sessionDuration(scope.row)"></span>
                </template>
            </el-table-column>
            <el-table-column prop="" label="日志行数">
                <template slot-scope="scope">
                    <span v-text="countLogLineCount(scope.row)"></span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="审计状态">
                <template slot-scope="scope">{{scope.row.status | basecode(scope.row.status,'ssh_audit_status')}}</template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
                <template slot-scope="scope">
                    <el-button @click="updateJumpServerByLogs(scope.row)" icon="el-icon-edit" size="small" type="primary">审计</el-button>
                    <el-button @click="deleteJumpServerByLogs(scope.row)" type="danger" icon="el-icon-delete" style="margin-left: 6px;" size="mini" >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="page"
                :page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                :style="{float:'right',padding:'20px'}"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>

        <comp-ssh-log :obj="formData" :visible.sync="termVisible" @afterClose="doAfterClose"></comp-ssh-log>


    </div>
</template>

<script>
    import {
        getJumpServerSshLogsList,
        deleteJumpServerSshLogs,
        deleteJumpServerSshLogsByIds,
    }from "@/api/jump_server_logs";
    import infoList from '@/mixins/infoList'
    import CompSshLog from './CompSshLog'
    export default {
        components: {CompSshLog},
        name: "jumpServerLogs",
        mixins: [infoList],
        data() {
            return {
                termVisible: false,
                auditOptions:[],
                multipleSelection: [],
                multiple: true,
                listApi: getJumpServerSshLogsList,
                searchInfo: {
                    user_name: null,
                    client_ip:null
                },
                formData: {},
                rules: {
                    status: [{ required: true,  message: '请选择审计状态', trigger: 'blur' }],
                }

            }
        },
        methods: {
            doAfterClose() {
                this.termVisible = false
                this.getTableData();
            },
            sessionDuration(row) {
                let d1 = Date.parse(row.CreatedAt);
                let d2 = Date.parse(row.StartedAt);
                let delta = d1 - d2;
                return `${ Math.round(delta / 1000)}s`
            },
            countLogLineCount(row) {
                return JSON.parse(row.web_client_logs).length
            },
            handleSelectionChange(selection) {
                this.multiple = !selection.length
                this.multipleSelection = selection
            },
            //批量数据删除
            deleteBatchJumpServerByLogs() {
                if(this.multipleSelection.length == 0) {
                    this.$message({
                        type: 'error',
                        message: '请先选择要删除的项！'
                    })
                    return false
                }
                this.$confirm("此操作将永久删除选择数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(async () => {
                        const ids = []
                        this.multipleSelection &&
                        this.multipleSelection.map(item => {
                            ids.push(item.ID)
                        });
                        const res = await deleteJumpServerSshLogsByIds({ ids });
                        if (res.code == 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            await this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },
            // 项目搜索
            handleQuery() {
                this.getTableData()
            },
            deleteJumpServerByLogs(row) {
                this.$confirm("此操作将永久删除该应用, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(async () => {
                        this.visible = false;
                        const res = await deleteJumpServerSshLogs({ ID: row.ID });
                        if (res.code == 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            await this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },
            async updateJumpServerByLogs(row) {
                this.formData = row;
                this.termVisible = true
            },
        },
        async created() {
            await this.getTableData();
            this.auditOptions = this.getDicItemList('ssh_audit_status')
        }
    }
</script>

<style scoped>

</style>
